<template>
	<view class="">
		<template v-if="isAch == 1">
			<view class="flex justify-between">
				<view class="flex items-center">
					<template v-if="post.sec == 1">
						<view class="w-[100rpx] h-[100rpx] rounded-lg overflow-hidden bg-black/50 flex justify-center items-center">
							<text class="text-white">隐藏</text>
						</view>
					</template>
					<template v-else>
						<view class="w-[100rpx] h-[100rpx] rounded-lg overflow-hidden" v-if="post?.member?.ach == 1"
							@click.stop="handleGoUser(`/pages/user/anchor?id=${post?.member?.anchor.id}`, post?.member?.anchor.id, post?.member?.ach)">
							<ImageBoxVue :src="post?.member?.anchor.headimg"></ImageBoxVue>
						</view>
						<view class="w-[100rpx] h-[100rpx] rounded-lg overflow-hidden" v-else
							@click.stop="handleGoUser(`/pages/user/user?id=${post?.member?.id}`, post?.member?.id, post?.member?.ach)">
							<ImageBoxVue :src="post?.member?.headimg"></ImageBoxVue>
						</view>
					</template>
					<view class="pl-20">
						<template v-if="post.sec == 1">
							<view class="flex">
								<text>客户信息隐藏</text>
							</view>
						</template>
						<template v-else>
							<view class="flex" v-if="post?.member?.ach == 1">
								<text class="w-120 ellipsis">{{post.member?.anchor.name}}</text>
								<view class="ml-10 bg-gradient-to-r from-[#FF9562] to-[#FFBB55] py-4 px-8 rounded-sm">
									<text class="text-white font-bold">LV.{{post.member?.anchor.achorlevel.lev}}</text>
								</view>
							</view>
							<view class="flex" v-else>
								<text class="w-120 ellipsis">{{post?.member?.nickname}}</text>
								<view class="ml-10 bg-gradient-to-r from-[#FF9562] to-[#FFBB55] py-4 px-8 rounded-sm">
									<text class="text-white font-bold">LV.{{post?.member?.openlev}}</text>
								</view>
							</view>
						</template>
						<view class="flex items-center">
							<ImageBoxVue :src="post?.paysts==0?'/static/icons/blue.png':'/static/icons/red.png'" width="28rpx"
								height="28rpx">
							</ImageBoxVue>
							<text class="ml-10">{{post?.sinpay}}钻</text>
						</view>
					</view>
				</view>
				<view class="flex box-model">
					<template v-if="post?.posts == 1">
						<view class="flex" @click="handleClick">
							<text class="flex justify-center items-center w-40 vertical-text bg-[#E4F2FF]">所选不适感</text>
							<view class="flex items-center w-[264rpx] h-[138rpx] border-solid border-[#E4F2FF] bg-[#525E7A]">
								<view class="flex-1 flex flex-wrap justify-center items-center text-white">
									<text
										:class="[post?.addparme.split(',').indexOf(item.value) > -1?'item font-bold mr-10 text-[9px] active':'item font-bold mr-10 text-[9px]']"
										v-for="(item, idx) in addparmeList" :key="idx">{{item.value}}</text>
								</view>
							</view>
						</view>
					</template>
					<template v-if="post?.posts == 2">
						<template v-if="post?.starsts == 0">
							<text class="flex justify-center items-center w-40 vertical-text bg-[#E4F2FF]">所选单盘</text>
							<view class="w-228 h-[138rpx] border-solid border-[#E4F2FF]">
								<ImageBoxVue src="/static/community/single.png"></ImageBoxVue>
							</view>
						</template>
						<template v-if="post?.starsts == 1">
							<text class="flex justify-center items-center w-40 vertical-text bg-[#E4F2FF]">所选合盘</text>
							<view class="w-228 h-[138rpx] border-solid border-[#E4F2FF]">
								<ImageBoxVue src="/static/community/double.png"></ImageBoxVue>
							</view>
						</template>
					</template>
					<template v-if="post?.posts == 3">
						<template v-if="post?.sdes == 0">
							<text class="flex justify-center items-center w-40 vertical-text bg-[#E4F2FF]">所选数字</text>
							<view class="flex w-[264rpx] h-[138rpx] border-solid border-[#E4F2FF]">
								<view class="flex-1 flex flex-wrap justify-center items-center bg-[#525E7A] text-white"
									v-if="post.selcard">
									<text class="font-bold mr-10 text-sm" v-for="item in post.selcard.split(',')"
										:key="item">{{item}}</text>
								</view>
							</view>
						</template>
						<template v-if="post?.sdes == 1">
							<view class="flex" @click="handleClickTarot">
								<text class="flex justify-center items-center w-40 vertical-text bg-[#E4F2FF]">所选牌阵</text>
								<view class="flex w-[264rpx] h-[138rpx] border-solid border-[#E4F2FF]">
									<ImageBoxVue src="/static/community/tarot_card.png"></ImageBoxVue>
								</view>
							</view>
						</template>
					</template>
				</view>
			</view>
			<!--  -->
			<view class="mt-20">
				<text class="font-bold">问题：</text>
				<text>{{post?.describe}}</text>
			</view>
			<view class="mt-20" v-if="post?.replenishment">
				<text class="font-bold">补充说明：</text>
				<text>{{post?.replenishment}}</text>
			</view>
			<!--  -->
			<view class="flex justify-between bg-[#F3FAFF] p-10 items-center mt-20" v-if="type != 4">
				<view class="flex justify-center items-center bg-[#D7F0FF] rounded-lg px-10 p-10">
					<text class="text-[#333333]">总采纳数</text>
					<text class="text-[#329EFF] font-bold ml-10">{{post?.pret}}</text>
				</view>
				<view class="bg-[#329EFF] rounded-full py-8 px-20" v-if="type != 2 && post?.sts == 0">
					<text class="text-white text-sm">我来解读</text>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="flex justify-center items-center h-140 bg-black/50" v-if="post.sec == 1">
				<text class="text-white">本帖已被作者设置为隐藏</text>
			</view>
			<view class="" v-else>
				<view class="flex justify-between">
					<view class="flex items-center">
						<template v-if="post.sec == 1">
							<view
								class="w-[100rpx] h-[100rpx] rounded-lg overflow-hidden bg-black/50 flex justify-center items-center">
								<text class="text-white">隐藏</text>
							</view>
						</template>
						<template v-else>
							<view class="w-[100rpx] h-[100rpx] rounded-lg overflow-hidden" v-if="post?.member?.ach == 1"
								@click.stop="handleGoUser(`/pages/user/anchor?id=${post?.member?.anchor.id}`, post?.member?.anchor.id, post?.member?.ach)">
								<ImageBoxVue :src="post?.member?.anchor.headimg"></ImageBoxVue>
							</view>
							<view class="w-[100rpx] h-[100rpx] rounded-lg overflow-hidden" v-else
								@click.stop="handleGoUser(`/pages/user/user?id=${post?.member?.id}`, post?.member?.id, post?.member?.ach)">
								<ImageBoxVue :src="post?.member?.headimg"></ImageBoxVue>
							</view>
						</template>
						<view class="pl-20">
							<template v-if="post.sec == 1">
								<view class="flex">
									<text>客户信息隐藏</text>
								</view>
							</template>
							<template v-else>
								<view class="flex" v-if="post?.member?.ach == 1">
									<text class="w-120 ellipsis">{{post.member?.anchor.name}}</text>
									<view class="ml-10 bg-gradient-to-r from-[#FF9562] to-[#FFBB55] py-4 px-8 rounded-sm">
										<text class="text-white font-bold">LV.{{post.member?.anchor.achorlevel.lev}}</text>
									</view>
								</view>
								<view class="flex" v-else>
									<text class="w-120 ellipsis">{{post?.member?.nickname}}</text>
									<view class="ml-10 bg-gradient-to-r from-[#FF9562] to-[#FFBB55] py-4 px-8 rounded-sm">
										<text class="text-white font-bold">LV.{{post?.member?.openlev}}</text>
									</view>
								</view>
							</template>
							<view class="flex items-center">
								<ImageBoxVue :src="post?.paysts==0?'/static/icons/blue.png':'/static/icons/red.png'" width="28rpx"
									height="28rpx">
								</ImageBoxVue>
								<text class="ml-10">{{post?.sinpay}}钻</text>
							</view>
						</view>
					</view>
					<view class="flex box-model">
						<template v-if="post?.posts == 1">
							<view class="flex" @click="handleClick">
								<text class="flex justify-center items-center w-40 vertical-text bg-[#E4F2FF]">所选不适感</text>
								<view class="flex items-center w-[264rpx] h-[138rpx] border-solid border-[#E4F2FF] bg-[#525E7A]">
									<view class="flex-1 flex flex-wrap justify-center items-center text-white">
										<text
											:class="[post?.addparme.split(',').indexOf(item.value) > -1?'item font-bold mr-10 text-[9px] active':'item font-bold mr-10 text-[9px]']"
											v-for="(item, idx) in addparmeList" :key="idx">{{item.value}}</text>
									</view>
								</view>
							</view>
						</template>
						<template v-if="post?.posts == 2">
							<template v-if="post?.starsts == 0">
								<text class="flex justify-center items-center w-40 vertical-text bg-[#E4F2FF]">所选单盘</text>
								<view class="w-228 h-[138rpx] border-solid border-[#E4F2FF]">
									<ImageBoxVue src="/static/community/single.png"></ImageBoxVue>
								</view>
							</template>
							<template v-if="post?.starsts == 1">
								<text class="flex justify-center items-center w-40 vertical-text bg-[#E4F2FF]">所选合盘</text>
								<view class="w-228 h-[138rpx] border-solid border-[#E4F2FF]">
									<ImageBoxVue src="/static/community/double.png"></ImageBoxVue>
								</view>
							</template>
						</template>
						<template v-if="post?.posts == 3">
							<template v-if="post?.sdes == 0">
								<text class="flex justify-center items-center w-40 vertical-text bg-[#E4F2FF]">所选数字</text>
								<view class="flex w-[264rpx] h-[138rpx] border-solid border-[#E4F2FF]">
									<view class="flex-1 flex flex-wrap justify-center items-center bg-[#525E7A] text-white"
										v-if="post.selcard">
										<text class="font-bold mr-10 text-sm" v-for="item in post.selcard.split(',')"
											:key="item">{{item}}</text>
									</view>
								</view>
							</template>
							<template v-if="post?.sdes == 1">
								<view class="flex" @click="handleClickTarot">
									<text class="flex justify-center items-center w-40 vertical-text bg-[#E4F2FF]">所选牌阵</text>
									<view class="flex w-[264rpx] h-[138rpx] border-solid border-[#E4F2FF]">
										<ImageBoxVue src="/static/community/tarot_card.png"></ImageBoxVue>
									</view>
								</view>
							</template>
						</template>
					</view>
				</view>
				<!--  -->
				<view class="mt-20">
					<text class="font-bold">问题：</text>
					<text>{{post?.describe}}</text>
				</view>
				<view class="mt-20" v-if="post?.replenishment">
					<text class="font-bold">补充说明：</text>
					<text>{{post?.replenishment}}</text>
				</view>
				<!--  -->
				<view class="flex justify-between bg-[#F3FAFF] p-10 items-center mt-20" v-if="type != 4">
					<view class="flex justify-center items-center bg-[#D7F0FF] rounded-lg px-10 p-10">
						<text class="text-[#333333]">总采纳数</text>
						<text class="text-[#329EFF] font-bold ml-10">{{post?.pret}}</text>
					</view>
					<view class="bg-[#329EFF] rounded-full py-8 px-20" v-if="type != 2">
						<text class="text-white text-sm">我来解读</text>
					</view>
				</view>
			</view>
		</template>

		<uni-popup ref="popupRef" type="center">
			<view class="bg-white rounded-lg p-30 mx-30">
				<view class="text-center text-lg font-bold text-[#666666]">不适感</view>
				<view class="flex justify-center items-center mt-30">
					<uni-data-checkbox multiple v-model="addparme" :localdata="addparmeList"></uni-data-checkbox>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		computed,
		onMounted,
	} from 'vue';

	const {
		post,
		type
	} = defineProps(['post', 'type']) // type 1、列表 2、详情 3、预览 4、解读列表

	const emit = defineEmits(['send', 'showView'])

	const popupRef = ref(null)
	const addparmeList = ref([])
	const isAch = ref(0)
	addparmeList.value = uni.getStorageSync("addparme")

	const addparme = computed(() => { // 不适感
		return post.addparme ? post.addparme.split(',') : []
	})
	isAch.value = uni.getStorageSync('user').ach
	onMounted(() => {
		addparmeList.value.map(item => {
			item.disable = true
		})
	})

	const handleGoUser = (router, id, ach) => {
		if (ach == 1) {
			const anchorId = uni.getStorageSync("anchor").id
			if (anchorId != id) {
				onPath(router)
			}
		} else {
			const userId = uni.getStorageSync("user").id
			if (userId != id) {
				onPath(router)
			}
		}
	}

	const onPath = (router) => {
		uni.navigateTo({
			url: router
		})
	}
	const handleClick = () => {
		if (type == 1 || type == 4) {
			return
		}
		popupRef.value.open()
	}
	const handleClickTarot = () => {
		console.log(post)
		if (type == 1 || type == 4) {
			return
		}
		uni.navigateTo({
			url: `/pages/test/card-spread?id=${post.id}&deckId=${post.deck.id}`
		})
	}
</script>

<style lang="scss" scoped>
	.box-model {
		align-items: stretch;

		.item {
			&:nth-child(3n) {
				margin-right: 0;
			}

			&.active {
				color: #FF9562 !important;
			}
		}
	}

	:deep(.uni-data-checklist .checklist-group) {
		justify-content: center;
	}

	:deep(.uni-data-checklist .checklist-group .checklist-box) {
		width: 26%;
		margin-bottom: 20rpx;

		&:nth-child(3n) {
			margin-right: 0;
		}
	}

	:deep(.uni-data-checklist .checklist-group .checklist-box .checklist-content .checklist-text) {
		font-size: 24rpx !important;
	}
</style>